<!doctype html>
<html>

<head>
    <#import "spring.ftl" as spring>
        <title>
            <@spring.message code="title" />
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="/bootstrap-3.3.7-dist/css/bootstrap.min.css">
        <link rel=stylesheet type=text/css href="/style.css" />
        <link rel="stylesheet" type="text/css" href="/highlight-theme-github.css" />
        <script src="/highlight.pack.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <#include "/nav.ftl">
        </div>
        <div class="col-xs-12 text-center">
            <div class="btn-group btn-group-lg" role="group" aria-label="card type">
                <#if card_type??>
                    <#if card_type=="general">
                        <a href="/general" class="btn btn-primary"><@spring.message code="system.General"/></a>
                        <a href="/code" class="btn btn-default"><@spring.message code="system.Code"/></a>
                        <#elseif card_type=="code">
                            <a href="/general" class="btn btn-default"><@spring.message code="system.General"/></a>
                            <a href="/code" class="btn btn-primary"><@spring.message code="system.Code"/></a>
                            <#else>
                                <a href="/general" class="btn btn-default"><@spring.message code="system.General"/></a>
                                <a href="/code" class="btn btn-default"><@spring.message code="system.Code"/></a>
                    </#if>
                    <#else>
                        <a href="/general" class="btn btn-primary"><@spring.message code="system.General"/></a>
                        <a href="/code" class="btn btn-default"><@spring.message code="system.Code"/></a>
                </#if>
            </div>
    <hr/>
        </div>
    </div>


    <div class="row memorizePanel">
        <!--
        <div class="col-xs-2">
            <div class="alignContainer">
                <div class="alignMiddle text-right">
                    <br/>
                    <br/>
                    <a href="wewetw"><i class="fa fa-chevron-left fa-5x"></i></a>
                </div>
            </div>
        </div>
        -->
        <div class="col-xs-8 col-xs-offset-2">
            <div class="panel panel-default cardFront">
                <div class="panel-body">
                    <div class="alignContainer">
                        <div class="alignMiddle frontText">
                            <h3 class="text-center">${ card.front }</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-primary cardBack">
                <div class="panel-body">
                    <div class="alignContainer">
                        <div class="alignMiddle frontText">
                            <#if card.type==1>
                                <#if short_answer==1>
                                    <div class="text-center largerText">
                                </#if>
                                ${card.back}
                                <#if short_answer??>
                                    </div>
                                </#if>
                                <#else>
                                    <pre><code>${card.back}</code></pre>
                            </#if>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--
        <div class="col-xs-2">
            <div class="alignContainer">
                <div class="alignMiddle text-left">
                    <br/>
                    <br/>
                    <a href="ergergerge"><i class="fa fa-chevron-right fa-5x"></i></a>
                </div>
            </div>
        </div>
        -->
    </div>

    <div class="row">
        <div class="col-xs-12 text-center">
            <a href="javascript:" class="btn btn-primary btn-lg flipCard">
                <i class="fa fa-exchange"></i>  <@spring.message code="system.flip" />
            </a>
            &nbsp; &nbsp;
            <a href="/mark_known/${card.id}/${card_type}" class="btn btn-success btn-lg">
                <i class="fa fa-check"></i>  <@spring.message code="system.iknowit" />
            </a>
            &nbsp; &nbsp;
            <a href="/${card_type}" class="btn btn-primary btn-lg">
             <@spring.message code="system.next" />
                <i class="fa fa-arrow-right"></i>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 text-center">
            <br />
            <br />
            <br />
            <a href="/${card_type}/${card.id}" class="btn btn-default btn-sm">
                <i class="fa fa-bookmark"></i> <@spring.message code="system.bookmark"/> (${card.id })
            </a>

        </div>
    </div>
    <script src="/jquery-2.2.4.min.js"></script>
    <script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="/8cea844162.js"></script>
    <script src="/fastclick.min.js"></script>
    <script src="/cards-show-ctrl.js" type="text/javascript"></script>
</body>

</html>